<template>
  <van-nav-bar
      :title="isOwner ? '我的商品详情' : '商品详情'"
      left-text="返回"
      left-arrow
      @click-left="$emit('back')"
  >
    <template #right>
      <!-- 所有者显示更多操作菜单 -->
      <van-dropdown-menu v-if="isOwner" class="dropdown-menu">
        <van-dropdown-item :options="ownerOptions" @change="onOptionChange" />
      </van-dropdown-menu>
    </template>
  </van-nav-bar>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps<{
  isOwner?: boolean;
  itemStatus?: number;
}>();

const emit = defineEmits<{
  (e: 'back'): void;
  (e: 'edit'): void;
  (e: 'changeStatus'): void;
}>();

// 所有者的下拉菜单选项
const ownerOptions = ref([
  { text: '更多操作', value: 0 },
  { text: '编辑商品', value: 1 },
  { text: '下架商品', value: 2 },
]);

// 监听商品状态变化，更新下拉菜单文本
watch(() => props.itemStatus, (newStatus) => {
  if (newStatus === 2) {
    ownerOptions.value[2].text = '重新上架';
  } else {
    ownerOptions.value[2].text = '下架商品';
  }
}, { immediate: true });

const onOptionChange = (value: number) => {
  switch(value) {
    case 1:
      emit('edit');
      break;
    case 2:
      emit('changeStatus');
      break;
  }
};
</script>

<style scoped>
.dropdown-menu {
  width: auto;
  height: auto;
}

:deep(.van-dropdown-menu__bar) {
  height: 30px;
  background: transparent;
  box-shadow: none;
}
</style>